<template>
	<div class="content home">
		<heads :current='0'></heads>
		<div class="banner">
			<a href="#">
				<img :src="headImage" />
				<div class="font">
					<p class="on">{{ $t('home_page.explore') }}</p>
					<span>{{ $t('home_page.subtitle') }}</span>
				</div>
			</a>
		</div>
		<div class="main_page_box">
			<div class="m">
				<div class="main_items">
					<div class="tong_title">
						<span>{{ $t('home_page.sharedAdventures') }}</span>
					</div>
					<ul>
						<li>
							<a href="javascript:">
								<div class="picture"><img :src="banner1" /></div>
								<div class="grow">
									<p>{{ $t('home_page.sunsetCruise.title') }}</p>
									<span>{{ $t('home_page.sunsetCruise.description') }}</span>
									<div class="btn" @click="toDetail('/team1')">{{ $t('home_page.exploreMore') }}</div>
								</div>
							</a>
						</li>
						<li>
							<a href="javascript:">
								<div class="picture"><img :src="banner2" /></div>
								<div class="grow">
									<p>{{ $t('home_page.hookDiveGrill.title') }}</p>
									<span>{{ $t('home_page.hookDiveGrill.description') }}</span>
									<div class="btn" @click="toDetail('/team3')">{{ $t('home_page.exploreMore') }}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="main_items">
					<div class="tong_title">
						<span>{{ $t('home_page.privateCharter.title') }}</span>
					</div>
					<ul>
						<li>
							<a href="javascript:">
								<div class="picture"><img :src="banner3" /></div>
								<div class="grow">
									<p>{{ $t('home_page.privateCharter.bookingTitle') }}</p>
									<span>{{ $t('home_page.privateCharter.description') }}</span>
									<div class="btn" @click="toDetail('/team2')">{{ $t('home_page.exploreMore') }}</div>
								</div>
							</a>
						</li>
					</ul>
					<div class="video">
						<video :poster="video.post_url" controls="controls">
              <source :src="video.url" type="video/mp4"></source>
						</video>
						<div class="desc"><span>{{ $t('home_page.videoDescription') }}</span></div>
					</div>
				</div>
				<div class="main_gallery">
					<div class="tong_title">
						<span>{{ $t('home_page.gallery.title') }}</span>
					</div>
					<div class="box">
						<div class="swiper mySwiper">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="item in slideList">
									<ul>
										<li v-for="li in (item || []).filter(i => i)">
                      <el-image :preview-src-list="imageList" :src="li" fit="cover" style="width: 100%;height: 100%"/>
                    </li>
									</ul>
								</div>
							</div>
							<div class="swiper-pagination"></div>
						</div>

					</div>
					<div class="public_button">
						<a href="/#/gallery">{{ $t('home_page.gallery.morePhotos') }}</a>
					</div>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
	import swiper from "swiper";
	export default {
		name: '',
		data() {
			return {
        slideList: [],
        imageList: []
			}
		},
    computed: {
      banner() {
        return this.$store.state.banners || {}
      },
      headImage() {
        return (this.banner['首页背景'] || {url: '' }).url
      },
      // 首页-3-Hour Sunset Fishing Cruise
      banner1() {
        return (this.banner['首页-3-Hour Sunset Fishing Cruise'] || {url: '' }).url
      },
      // 首页-4-Private Charters Booking
      banner2() {
        return (this.banner['首页-Half-Day Hook, Dive, and Grill'] || {url: '' }).url
      },
      // 首页-5-Our Gallery
      banner3() {
        return (this.banner['首页-Private Charters Booking'] || {url: '' }).url
      },
      // 视频
      video() {
        return this.banner['首页-视频'] || {}
      },
    },
		mounted() {
      let list = []
      let imageList = ((this.banner['首页-轮播'] || {}).url || '').split(',')
      this.imageList = imageList.map(item => item)
      while (imageList.length > 0) {
        list.push(imageList.splice(0, 6))
      }
      console.log('list',list)
      this.slideList = list
			this.$nextTick(() => {
        this.initSwiper();
      })
		},
		methods: {
			initSwiper() {
				new Swiper(".mySwiper", {
					//设置轮播的循环方式
					loop: false,
					//设置自动播放间隔时间
          autoPlay: false,
					// 轮播效果,默认为平滑轮播
					effect: "slide",
          pagination: ".swiper-pagination",
          paginationClickable:true,
				});
			},
      toDetail(path) {
        this.$router.push({
          path
        })
      }
		}
	}
</script>

<style lang="scss">
</style>
